{extend name="Layout/base" /}
{block name="content"}
<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTAINER -->
<div class="container-padding">



  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Gmaps.js
        </div>

            <div class="panel-body">
              <h4>Google Maps API with Less Pain and more Fun</h4>
              <p>Gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.</p>
              <p><b>Gmaps.js:</b> the easiest way to use Google Maps<br>
              <a href="http://hpneo.github.io/gmaps" target="_blank">Official documentation</a></p>
            </div>

      </div>
    </div>
    

  </div>
  <!-- End Row -->

  <!-- Start Row -->
  <div class="row">

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-title">
          Basic
        </div>
            <div class="panel-body">
                <div id="gmaps-basic" class="gmaps"></div>
            </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-title">
          Markers
        </div>
            <div class="panel-body">
                <div id="gmaps-markers" class="gmaps"></div>
            </div>
      </div>
    </div>

  </div>
  <!-- End Row -->

  <!-- Start Row -->
  <div class="row">

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-title">
          Polygons
        </div>
            <div class="panel-body">
                <div id="gmaps-polygons" class="gmaps"></div>
            </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-title">
          Overlays
        </div>
            <div class="panel-body">
                <div id="gmaps-overlay" class="gmaps"></div>
            </div>
      </div>
    </div>

  </div>
  <!-- End Row -->

  <!-- Start Row -->
  <div class="row">

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-title">
          Street View Panoramas
        </div>
            <div class="panel-body">
              <div id="panorama" class="gmaps-panaroma"></div>
            </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-title">
          Routes
        </div>
            <div class="panel-body">
                <div id="gmaps-route" class="gmaps"></div>
            </div>
      </div>
    </div>

  </div>
  <!-- End Row -->

  <!-- Start Row -->
  <div class="row">

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-title">
          Map Types
        </div>
            <div class="panel-body">
              <div id="gmaps-types" class="gmaps"></div>
            </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-title">
          Context menu (right click on map)
        </div>
            <div class="panel-body">
                <div id="gmaps-menu" class="gmaps"></div>
            </div>
      </div>
    </div>

  </div>
  <!-- End Row -->




</div>
<!-- END CONTAINER -->
 <!-- //////////////////////////////////////////////////////////////////////////// -->
{/block}